<template>
  <div class="add_dialog" v-if="open" id="add_dialog">
    <div class="basic_info">基本信息</div>
    <form class="layui-form" action="" lay-filter="formTeacherFilter">
      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">不动产单元号</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="unitNumber"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">不动产权证号</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="certificateNumber"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">权利类型</label>
              <div class="layui-input-inline">
                <select name="rightType">
                  <option value=""></option>
                  <option value="土地使用权">土地使用权</option>
                  <option value="房屋所有权">房屋所有权</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">发证机关</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="issuingAuthority"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item flex">
            <label class="layui-form-label">附件</label>
            <div
              class="layui-upload-drag"
              style="display: block"
              id="ID-upload-demo-drag"
            >
              <div class="isShow-style">
                <i class="layui-icon layui-icon-upload"></i>
                <div>上传附件</div>
              </div>
              <div
                class="layui-hide"
                id="ID-upload-demo-preview"
                style="width: 100%; height: 100%"
              >
                <img
                  class="image_style"
                  src=""
                  alt="上传成功"
                  style="max-width: 100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">发证日期</label>
            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="issuingDate"
                id="issuingDate"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">权利所有权人</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="ownerName"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">权利人证件号</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="ownerIdNumber"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">物业类型</label>
            <div class="layui-input-inline">
                <select name="propertyType">
                  <option value=""></option>
                  <option value="商业物业">商业物业</option>
                  <option value="居住物业">居住物业</option>
                  <option value="工业物业">工业物业</option>
                  <option value="政府类物业">政府类物业</option>
                  <option value="其他用途物业">其他用途物业</option>
                </select>
              </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <label class="layui-form-label">所属地址</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="address"
                lay-verify="required"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input input-91"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">建筑面积</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="floorArea"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">分摊面积</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="sharedArea"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <label class="layui-form-label">用途</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="purpose"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input input-91"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">使用期限</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="usageTerm"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">归管部门</label>
            <div class="layui-input-block" id="department-style">
              <!-- <input
                type="text"
                name="department"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              /> -->
              <input
                name="department"
                type="text"
                id="tree1"
                lay-filter="tree1"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">期限开始</label>
            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="startDate"
                id="startDate"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input input-100"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">期限结束</label>
            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="endDate"
                id="endDate"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input input-100"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">当前状态</label>
            <div class="layui-input-inline">
              <select name="currentStatus">
                <option value=""></option>
                <option value="已备案">已备案</option>
                <option value="未备案">未备案</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
              <textarea
                name="remark"
                placeholder="请输入"
                class="layui-textarea"
              ></textarea>
            </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button
                type="button"
                class="layui-btn"
                lay-submit
                lay-filter="add_submit"
              >
                提交
              </button>
              <button
                type="reset"
                class="layui-btn layui-btn-primary reset_from"
                style="display: none"
              >
                取消
              </button>
              <button type="button" class="layui-btn layui-btn-primary cancel">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      open: true,
    };
  },
  methods: {
    echoData(departmentId) {
      window.layui.use(["form", "treeSelect"], async () => {
        this.treeSelect = window.layui.treeSelect;
        // 树形下拉组件
        this.treeSelect.render({
          // 选择器
          elem: "#tree1",
          // 数据
          data:
            process.env.VUE_APP_BASE_API +
            '/service-hrm/hrm-organization/query-nodes?isLoadAllDescendants=1&targetType="com"',
          // 异步加载方式：get/post，默认get
          type: "post",
          headers: {
            Authorization: "Bearer " + this.token,
          },
          style: {
            folder: {
              // 父节点图标
              enable: true, // 是否开启：true/false
            },
            line: {
              // 连接线
              enable: true, // 是否开启：true/false
            },
          },
          // 占位符
          placeholder: "请选择",
          // 是否开启搜索功能：true/false，默认false
          search: true,
          // 加载完成后的回调函数
          success: (d) => {
            //             // 选中节点，根据id筛选
            console.log('====',departmentId)
            if(departmentId) {
              this.treeSelect.checkNode("tree1", departmentId);
              const dom = document.querySelectorAll('#department-style .layui-treeSelect')
              dom[dom.length - 1].remove()
            }else {
              this.treeSelect.checkNode("tree1", null);
              const dom = document.querySelectorAll('#department-style .layui-treeSelect')
              dom[dom.length - 1].remove()
            }
           
          },
        });
      });
    },
  },
};
</script>
<style>
.layui-treeSelect {
  width: 79% !important;
  margin-left: 20px !important;
}
</style>
<style scoped lang="scss">
.add_dialog {
  padding: 12px;
  .layui-form-label {
    width: 100px;
  }
  .layui-input {
    width: 80%;
    &.input-91 {
      width: 91.5%;
    }
    &.input-100 {
      width: 100%;
    }
  }
  .layui-textarea {
    width: 92%;
  }
  .layui-upload-drag {
    padding: 0;
    width: 210px;
    height: 100px;
  }
  .isShow-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .layui-upload-drag .layui-icon {
    font-size: 35px;
  }
  .layui-input-inline {
    width: 214px;
  }
  .basic_info {
    position: relative;
    margin-left: 22px;
    font-size: 16px;
    color: #141313;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -16px;
      transform: translateY(-50%);
      display: inline-block;
      margin-right: 12px;
      width: 5px;
      height: 15px;
      background-color: #ff6534;
    }
  }
  .image_style {
    width: 100%;
    height: 100%;
  }
}
</style>
